<template>
  <div id="search-picture-page">
    <h3 style="margin-bottom: 16px">以图搜图</h3>
    <h3 style="margin:16px 0">原图</h3>
    <a-card style="width: 240px">
      <template #cover>
        <img
          style="height: 180px; object-fit: cover"
          :src="picture.thumbnailUrl ?? picture.url"
          :alt="picture.name"
        />
      </template>
    </a-card>
    <h3 style="margin:16px 0">识图结果</h3>
    <!-- 图片列表 -->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
    >
      <template #renderItem="{ item: pic }">
        <a-list-item style="padding: 0">
          <a :href="pic.fromUrl" target="_blank">
            <a-card >
              <template #cover>
                <img
                  :src="pic.thumbUrl"
                  style="height: 180px; object-fit: cover"
                  loading="lazy"
                  alt=""
                />
              </template>
            </a-card>
          </a>
        </a-list-item>
      </template>
    </a-list>

  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getPictureVoByIdUsingGet, searchPictureByPictureUsingPost } from '@/request/api/pictureController.js'
import { message } from 'ant-design-vue'

ref()
const route = useRoute()
const pictureId = computed(() => route.query?.pictureId)
const picture = ref<API.PictureVO>({})
const dataList=ref<API.ImageSearchResult[]>([])
const loading=ref<boolean>(false)

const getOldPicture = async () => {
  if (pictureId) {
    const { data: res } = await getPictureVoByIdUsingGet({
      id: pictureId.value,
    })
    if (res.code === 0 && res.data) {
      picture.value = res.data
    }
  }
}
// 获取搜索结果
const fetchData=async ()=> {
  loading.value=true
  const { data:res } = await searchPictureByPictureUsingPost({ pictureId: pictureId.value })
  if (res.code === 0 && res.data) {
    dataList.value=res.data
  } else {
    message.error("获取数据失败,",res.message)
  }
  loading.value=false
}

onMounted(() => {
  getOldPicture()
  fetchData()
})
</script>

<style lang="less" scoped></style>
